<script setup lang="ts">
  import socketServer from '@/plugins/socketServer'
  import { useChannelStore } from '@/store/channel'
  import { vElementVisibility } from '@vueuse/components'
  import { computed } from 'vue'
  const channel = useChannelStore()
  const avatar = computed(() => {
    return channel.SystemInfo.agentAvatar
  })
  const props = defineProps({
    message: {
      type: Object,
      default: () => ({}),
    },
  })
  const handleElementVisibility = (isVisible: boolean) => {
    if (isVisible && !props.message.read) {
      console.log('发送已读消息到坐席', isVisible, props.message)
      socketServer.sendMessage(props.message, '@type_message_read@', () => {
        props.message.read = true
      })
    }
  }
</script>

<template>
  <div
    class="w-full h-auto pl-3 pr-14 box-border mt-3 flex flex-row justify-start"
  >
    <div class="avatar">
      <img class="rounded-md w-10 h-10 mt-1" :src="avatar" alt="" />
    </div>
    <div class="content flex-1 w-full h-auto pt-3 pl-2 ml-1">
      <div
        class="bg-[#fff] rounded-lg px-3 py-1 inline-block relative mt-[3px] break-all"
        v-element-visibility="handleElementVisibility"
      >
        <i
          class="iconfont icon-strange arrow-icon rotate-[120deg] text-white absolute -left-3 top-1"
        ></i>
        <slot>
          <div v-html="props.message.content"></div>
        </slot>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
